גליונות סגנון מדורגים - CSS
Cascading Style Sheets
בוררי סגנון
Style Selectors
בוררי רכיבים
בורר *
בורר הכל *, מאפשר לברור את כל
הרכיבים לעיצוב. למשל, אם נבקש להסיר את כל השוליים
ואת כל הדפנות של כל רכיבי התיבה נרשום ב־CSS:
*{
margin:0;
padding:0;
}
בורר #X
בורר מזהה #X, מאפשר לברור רכיב
בודד לפי מאפיין id. למשל, על מנת
לברור רכיב תמונה כגון:
<img id="myImg" src="myImg.png" />
משתמשים בקוד:
#myImg{
/* כאן יבואו הגדרות העיצוב */
}
בורר .X
בורר מחלקה .X, מאפשר לברור קבוצת
רכיבים לפי מאפיין class. למשל, על מנת לברור:
<img class="myImg" src="myImg.png" />
משתמשים בקוד:
.myImg{
/* כאן יבואו הגדרות העיצוב */
}
בורר X
בורר רכיב X, מאפשר לברור את כל
הרכיבים מסוג מסויים. למשל, על מנת לברור רכיבי תמונה:
<img src="myImg.png" />
משתמשים בקוד:
img{
/* כאן יבואו הגדרות העיצוב */
}
בורר X , Y
בורר רכיבים רבים X , Y, מאפשר לברור
מספר רכיבים מתוך רשימה מפוסקת. למשל, על מנת לברור רכיבי תמונה או חוזי:
<img src="myImg.png" /> <video controls="controls"> <source src="myVid.ogg" type="video/ogg" /> דפדפן זה לא תומך ברכיב video </video>
משתמשים בקוד:
img, video{
/* כאן יבואו הגדרות העיצוב */
}
בורר X + Y
בורר רכיב סמוך X + Y, מאפשר לברור
רכיבים אשר נמצאים סמוך לרכיבים אחרים.
בורר X ~ Y
בורר רכיב עוקב X ~ Y, מאפשר
לברור רכיבים אשר עוקבים אחר רכיבים אחרים.
מחלקה מדומה X:not(selector)
מחלקת שלילה X:not(selector), מאפשרת לברור
את כל הרכיבים אשר אינם עונים לתנאי הבורר.
מחלקה מדומה X:empty
מחלקת ריקם X:empty,
מאפשרת לברור את כל הרכיבים הריקים.
מחלקה מדומה X:root
מחלקת שורש X:root, מאפשרת לברור
את רכיב השורש. בסומנת מלל מקושר HTML יבחר רכיב
<html>.
בוררי צאצאים
בורר X Y
בורר צאצא X Y, מאפשר לברור רכיב
צאצא לרכיב אחר.
בורר X > Y
בורר צאצא ישיר X > Y, מאפשר
לברור רכיבים אשר הם צאצאים ישירים לרכיבים אחרים.
מחלקה מדומה X:first-child
מחלקת ילד ראשון X:first-child, מאפשרת לברור
ילד ראשון של הרכיב הנבחר.
מחלקה מדומה X:last-child
מחלקת ילד אחרון X:last-child, מאפשרת לברור
ילד אחרון של הרכיב הנבחר.
מחלקה מדומה X:nth-child(n)
מחלקת ילד חיוביX:nth-child(n)
, מאפשרת לברור ילד של הרכיבים הנבחרים
על פי מספרו הסידורי.
tr:nth-child(3){
background-color:green; /* טבלה שורה שלישית רקע ירוק */
}
tr:nth-child(3n){
background-color:green; /* טבלה כל שורה שלישית רקע ירוק */
}
tr:nth-child(even){
background-color:green; /* טבלה כל שורה זוגית רקע ירוק */
}
tr:nth-child(odd){
background-color:green; /* טבלה כל שורה אי-זוגית רקע ירוק */
}
tr:nth-child(5n+2){
background-color:green; /* טבלה כל שורה חמישית החל משורה שנייה רקע ירוק */
}
tr:nth-child(5n-1){
background-color:green; /* טבלה כל שורה חמישית החל משורה רביעית רקע ירוק */
}
tr:nth-child(-n+3){
background-color:green; /* טבלה שלוש שורות ראשונות רקע ירוק */
}
מחלקה מדומה X:nth-last-child(n)
מחלקת ילד שלילי X:nth-last-child(n)
, מאפשרת לברור ילד מהסוף של הרכיבים
הנבחרים על פי מספרו הסידורי.
tr:nth-last-child(3){
background-color:green; /* טבלה שורה שלישית מהסוף רקע ירוק */
}
tr:nth-last-child(3n){
background-color:green; /* טבלה כל שורה שלישית מהסוף רקע ירוק */
}
tr:nth-last-child(even){
background-color:green; /* טבלה כל שורה זוגית מהסוף רקע ירוק */
}
tr:nth-last-child(odd){
background-color:green; /* טבלה כל שורה אי-זוגית מהסוף רקע ירוק */
}
tr:nth-last-child(5n+2){
background-color:green; /* טבלה כל שורה חמישית מהסוף החל משורה שנייה מהסוף רקע ירוק */
}
tr:nth-last-child(5n-1){
background-color:green; /* טבלה כל שורה חמישית מהסוף החל משורה רביעית מהסוף רקע ירוק */
}
tr:nth-last-child(-n+3){
background-color:green; /* טבלה שלוש שורות אחרונות רקע ירוק */
}
מחלקה מדומה X:nth-of-type(n)
מחלקת סוג ילד חיובי X:nth-of-type(n),
מאפשרת לברור סוג ילד מסויים של הרכיבים
הנבחרים על פי מספרו הסידורי. מדלגת על רכיבים מסוג שונה.
p:nth-of-type(3){
background-color:green; /* פיסקה שלישית רקע ירוק */
}
p:nth-of-type(3n){
background-color:green; /* כל פיסקה שלישית רקע ירוק */
}
p:nth-of-type(even){
background-color:green; /* כל פיסקה זוגית רקע ירוק */
}
p:nth-of-type(odd){
background-color:green; /* כל פיסקה אי-זוגית רקע ירוק */
}
p:nth-of-type(5n+2){
background-color:green; /* כל פיסקה חמישית החל מפיסקה שנייה רקע ירוק */
}
p:nth-of-type(5n-1){
background-color:green; /* כל פיסקה חמישית החל מפיסקה רביעית רקע ירוק */
}
p:nth-of-type(-n+3){
background-color:green; /* שלוש פיסקאות ראשונות רקע ירוק */
}
מחלקה מדומה X:nth-last-of-type(n)
מחלקת סוג ילד שלילי X:nth-last-of-type(n),
מאפשרת לברור סוג ילד מסויים מהסוף של הרכיבים
הנבחרים על פי מספרו הסידורי. מדלגת על רכיבים מסוג שונה.
p:nth-last-of-type(3){
background-color:green; /* פיסקה שלישית מהסוף רקע ירוק */
}
p:nth-last-of-type(3n){
background-color:green; /* כל פיסקה מהסוף שלישית רקע ירוק */
}
p:nth-last-of-type(even){
background-color:green; /* כל פיסקה זוגית מהסוף רקע ירוק */
}
p:nth-last-of-type(odd){
background-color:green; /* כל פיסקה אי-זוגית מהסוף רקע ירוק */
}
p:nth-last-of-type(5n+2){
background-color:green; /* כל פיסקה חמישית מהסוף החל מפיסקה שנייה מהסוף רקע ירוק */
}
p:nth-last-of-type(5n-1){
background-color:green; /* כל פיסקה חמישית מהסוף החל מפיסקה רביעית מהסוף רקע ירוק */
}
p:nth-last-of-type(-n+3){
background-color:green; /* שלוש פיסקאות אחרונות רקע ירוק */
}
מחלקה מדומה X:first-of-type
מחלקת סוג ילד ראשון X:first-of-type,
מאפשרת לברור סוג ילד ראשון של הרכיב הנבחר.
מחלקה מדומה X:last-of-type
מחלקת סוג ילד אחרון X:last-of-type,
מאפשרת לברור סוג ילד אחרון של הרכיב הנבחר.
מחלקה מדומה X:only-child
מחלקת ילד יחיד X:only-child,
מאפשרת לברור ילד יחיד של הרכיב הנבחר.
מחלקה מדומה X:only-of-type
מחלקת סוג ילד יחיד X:only-of-type,
מאפשרת לברור ילד יחיד מסוגו של הרכיב הנבחר.
בוררי מאפיין
בורר X[attribute]
בורר מאפיין X[attribute], מאפשר
לברור רכיבים אשר יש להם מאפיין מסויים.
בורר X[name="value"]
בורר ערך מאפיין X[name="value"],
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
עם ערך מסויים.
בורר X[name*="value"]
בורר ערך מאפיין כלול X[name*="value"],
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
עם ערך מסויים הכלול בו.
מחלקה מדומה X:lang(langCode)
מחלקת שפה X:lang(langCode),
מאפשרת לברור את כל הרכיבים שקיבלו או ירשו
את השפה המצויינת בהפעלה. אחריה יכול לבוא מקף וערך תת־שפה.
:lang(he){
font-weight:italic; /* כל המלל העברי נטוי */
}
בורר X[name|="value"]
בורר ערך מאפיין ראשי X[name|="value"],
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
המתחיל עם ערך מסויים. אחריו יכול לבוא מקף וערך משני.
בורר X[name^="value"]
בורר ערך מאפיין מתחיל X[name^="value"],
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
המתחיל עם ערך מסויים.
בורר X[name$="value"]
בורר ערך מאפיין מסיים X[name$="value"],
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
המסתיים עם ערך מסויים.
בורר X[name~="value"]
בורר ערך מאפיין מרווח X[name~="value"],
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
עם ערך מסויים מתוך רשימה מרווחת.
בוררי קישור
מחלקה מדומה X:link
מחלקת קישורים X:link, מאפשרת לברור
את כל הקישורים בהם לא ביקרנו.
מחלקה מדומה X:visit
מחלקת מבוקרים X:visit, מאפשרת לברור
את כל הקישורים בהם כן ביקרנו.
מחלקה מדומה X:hover
מחלקת מרוחפים X:hover, מאפשרת לברור
את הרכיב מעליו מרחפים.
מחלקה מדומה X:active
מחלקת פעילים X:active, מאפשרת לברור
את הרכיב הפעיל ברגע זה.
מחלקה מדומה X:target
מחלקת מיועדים X:target, מאפשרת לברור
את רכיב היעד.
בוררי טופס
מחלקה מדומה X:focus
מחלקת ממוקדים X:focus, מאפשרת לברור
את הרכיב הממוקד ברגע זה, על ידי עכבר או מקלדת.
מחלקה מדומה X:checked
מחלקת מסומנים X:checked, מאפשרת לברור
את כל הרכיבים המסומנים.
מחלקה מדומה X:enabled
מחלקת מאופשרים X:enabled, מאפשרת לברור
את כל הרכיבים המאופשרים.
מחלקה מדומה X:disabled
מחלקת חסומים X:disabled, מאפשרת לברור
את כל הרכיבים החסומים.
רכיבים מדומים
אינם בדגם עצמי־המסמך, DOM
רכיב מדומה X::before
רכיב לפנים X::before, מאפשרת להוסיף
תוכן לפני הרכיבים הנבחרים. אם למשל נרצה להוסיף
לפני כל תוכן רכיבי <code> את
התיו LRE נרשום:
code::before{
content:'\202A';
}
המאפיין content יכול לקבל אחד או יותר מהערכים הבאים
- none מאפס את התוכן
- normal קובע את התוכן לברירת המחדל
- counter קובע תוכן למונה
- attr(attribute) קובע תוכן לפי אחד המאפיינים
- string קובע טקסט לתוכן
- open-quote קובע פתיחת ציטוט
- close-quote קובע סגירת ציטוט
- no-open-quote מסיר פתיחת ציטוט
- no-close-quote מסיר סגירת ציטוט
- url(url) קובע תוכן חיצוני
- inherit קובע הורשת תוכן ממעל
רכיב מדומה X::after
רכיב לאחור X::after, מאפשרת להוסיף
תוכן אחרי הרכיבים הנבחרים. אם למשל נרצה להוסיף
אחרי כל תוכן רכיבי <code> את
התיו PDF נרשום:
code::after{
content:'\202C';
}
רכיב מדומה X::first-line
רכיב שורה ראשונה X::first-line,
מאפשר לברור שורה ראשונה בפיסקה.
רכיב מדומה X::first-letter
רכיב אות ראשונה X::first-letter,
מאפשר לברור אות ראשונה בפיסקה.
רכיב מדומה X::selection
רכיב בחירה X::selection,
מאפשר לברור את תוכן הדף אותו סימן המשתמש.
הערה: בדפדפן פיירפוקס יש להשתמש
ברכיב בחירה X::-moz-selection.
אם למשל נרצה לצבוע את כל המלל הנבחר באדום נרשום:
::selection,
::-moz-selection{
color:red;
}